<template>
	<view class="shezhi">
		<view class="shezhi-shang">
			<view class="title">字号</view>
			<view class="btn" @click="isFont(-1)">A-</view>
			<view class="font">{{isFontSize}}</view>
			<view class="btn" @click="isFont(1)">A+</view>
		</view>
		<view class="shezhi-center">
			<view class="center-title">行高</view>
			<view class="center-img"><image :src="hangGao == 1 ? '/static/137/hang_0_1.png' : '/static/137/hang_0_0.png' " mode="" @click="ishangGao(1)"></image></view>
			<view class="center-img"><image :src="hangGao == 2 ? '/static/137/hang_1_1.png' : '/static/137/hang_1_0.png' " mode="" @click="ishangGao(2)"></image></view>
			<view class="center-img"><image :src="hangGao == 3 ? '/static/137/hang_2_1.png' : '/static/137/hang_2_0.png' " mode="" @click="ishangGao(3)"></image></view>
		</view>
		<view class="shezhi-xia">
			<view class="xia-title">背景</view>
			<view class="xia-bgc-a xia-margin" @click="isBeijing(1)"><image src="/static/137/520.png" mode="" v-show="beiJing ==1"></image></view>
			<view class="xia-bgc-b xia-margin" @click="isBeijing(2)"><image src="/static/137/520.png" mode="" v-show="beiJing ==2"></image></view>
			<view class="xia-bgc-c xia-margin" @click="isBeijing(3)"><image src="/static/137/520.png" mode="" v-show="beiJing ==3"></image></view>
			<view class="xia-bgc-d xia-margin" @click="isBeijing(4)"><image src="/static/137/520.png" mode="" v-show="beiJing ==4"></image></view>
			<view class="xia-bgc-e xia-margin" @click="isBeijing(5)"><image src="/static/137/520.png" mode="" v-show="beiJing ==5"></image></view>
			<view class="xia-bgc-f xia-margin" @click="isBeijing(6)"><image src="/static/137/520.png" mode="" v-show="beiJing ==6"></image></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"yuedu-shezhipopup",
		props:{
			fontSize:{
				type:Number,
				default(){
					return 48
				}
			},
			gao:{
				type:Number,
				default(){
					return 1
				}
			},
			bei:{
				type:Number,
				default(){
					return 1
				}
			}
		},
		data() {
			return {
				// fontSize:48,  //设置页面的字体大小默认值
				hangGao:this.gao,  //设置页面的行高操作默认值
				lineHight:75,  //设置行高默认值
				beiJing:this.bei,  //设置页面的背景颜色默认值
				bgc:"#fff",  //背景颜色默认值
				cor:"#00000", // 默认颜色
				isFontSize:this.fontSize,
			};
		},
		methods:{
			isFont(index){  //设置页面改字体大小,发射事件给父组件
				this.isFontSize =  this.isFontSize + index
				this.$emit('isFont',this.isFontSize)
				try {
				    uni.setStorageSync('isFont', this.isFontSize);
				} catch (e) {
				    // error
				}
			},
			ishangGao(index){  //设置页面改行高
				this.hangGao = index
				switch(index){  //根据index 值赋值不同的行高
					case 1:
						//console.log(75);
						this.lineHight = 75;
						break;
					case 2:
						//console.log(80);
						this.lineHight = 80;
						break;
					case 3:
						//console.log(85);
						this.lineHight = 95;
						break;
				}
				this.$emit('ishangGao',this.lineHight)
				try {
				    uni.setStorageSync('ishangGao', {lineHight:this.lineHight,hangGao:this.hangGao});
				} catch (e) {
				    // error
				}
			},
			isBeijing(index){  //设置页面改背景
				this.beiJing = index;
				switch(index){ //根据index 值赋值不同的背景和文字颜色
					case 1:
						this.bgc = "#fff";
						this.cor = "#000000";
						break;
					case 2:
						this.bgc = "#fcefcd";
						this.cor = "#000000";
						break;
					case 3:
						this.bgc = "#D1E4D0";
						this.cor = "#000000";
						break;
					case 4:
						this.bgc = "#E7E2C4";
						this.cor = "#000000";
						break;
					case 5:
						this.bgc = "#ADE3D4";
						this.cor = "#000000";
						break;
					case 6:
						this.bgc = "#3A3F43";
						this.cor = "#fff";
						break;
				}
				this.$emit('isBeijing',this.bgc,this.cor)
				try {
				    uni.setStorageSync('isBeijing', {bgc:this.bgc,cor:this.cor,beiJing:this.beiJing});
				} catch (e) {
				    // error
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.shezhi{
	padding: 40rpx 36rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	.shezhi-shang{
		display: flex;
		align-items: center;
		.title{
			font-size: 28rpx;
			color: #6D6D6D;
		}
		.btn{
			width: 180rpx;
			height: 52rpx;
			background: #CFCFCF;
			border-radius: 26rpx;
			font-size: 33rpx;
			color: #FFFFFF;
			text-align: center;
			margin-left: 24rpx;
		}
		.font{
			font-size: 32rpx;
			color: #3C3C3C;
			margin: 0 51rpx;
		}
	}
	.shezhi-center{
		height:120rpx ;
		display: flex;
		align-items: center;
		.center-title{
			font-size: 28rpx;
			color: #6D6D6D;
		}
		.center-img{
			image{
				width: 182rpx;
				height: 54rpx;
				margin-left: 25rpx;
			}
		}
	}
	.shezhi-xia{
		display: flex;
		align-items: center;
		.xia-title{
			font-size: 28rpx;
			color: #6D6D6D;
		}
		.xia-bgc-a{
			width: 62rpx;
			height: 62rpx;
			background-color: #fffae9;
			border-radius: 50%;
		}
		.xia-bgc-b{
			width: 62rpx;
			height: 62rpx;
			background-color:#fcefcd;
			border-radius: 50%;
		}
		.xia-bgc-c{
			width: 62rpx;
			height: 62rpx;
			background-color:#D1E4D0;
			border-radius: 50%;
		}
		.xia-bgc-d{
			width: 62rpx;
			height: 62rpx;
			background-color: #E7E2C4;
			border-radius: 50%;
		}
		.xia-bgc-e{
			width: 62rpx;
			height: 62rpx;
			background-color: #ADE3D4;
			border-radius: 50%;
		}
		.xia-bgc-f{
			width: 62rpx;
			height: 62rpx;
			background-color: #3A3F43;
			border-radius: 50%;
		}
		.xia-margin{
			margin: 0 21rpx;
			image{
				width: 62rpx;
				height: 62rpx;
			}
		}
	}
}
</style>
